<template>
    <div class="user-info">
        <div class="user-info-info">
            <el-card class="box-card" size="mini">
                <div slot="header">
                    <span>个人信息</span>
                </div>
                <div class="user-info-info-list">
                    <div class="user-info-info-list-portrait">
                        <div>
                            <img src="../../../assets/images/default-portrait.jpg" />
                        </div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="el-icon-s-custom"></i>
                            <span>用户账号</span>
                        </div>
                        <div>{{user.account.account}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="el-icon-user"></i>
                            <span>用户昵称</span>
                        </div>
                        <div>{{user.account.nickname}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="el-icon-user-solid"></i>
                            <span>用户名称</span>
                        </div>
                        <div>{{user.account.username}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-phone-square"></i>
                            <span>手机号码</span>
                        </div>
                        <div>{{user.account.mobile}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-envelope"></i>
                            <span>电子邮箱</span>
                        </div>
                        <div>{{user.account.email}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-user-secret"></i>
                            <span>职位/岗位</span>
                        </div>
                        <div>{{user.account.post}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-sitemap"></i>
                            <span>部门机构</span>
                        </div>
                        <div>{{branchName}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="el-icon-s-promotion"></i>
                            <span>所在地区</span>
                        </div>
                        <div>{{user.account.province}} / {{user.account.city}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-podcast"></i>
                            <span>用户权限</span>
                        </div>
                        <div>
                            <user-type :type="user.account.account_type"></user-type>
                        </div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-calendar"></i>
                            <span>账号创建日期</span>
                        </div>
                        <div>{{utils.GolangDateTime(user.account.created)}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-calendar"></i>
                            <span>上次登录日期</span>
                        </div>
                        <div>{{utils.GolangDateTime(user.user.last_login_time)}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-calendar"></i>
                            <span>最后登录日期</span>
                        </div>
                        <div>{{utils.GolangDateTime(user.user.login_time)}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-internet-explorer"></i>
                            <span>上次登录IP</span>
                        </div>
                        <div>{{user.user.last_login_ip}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-internet-explorer"></i>
                            <span>本次登录IP</span>
                        </div>
                        <div>{{user.user.login_ip}}</div>
                    </div>
                    <div class="user-info-info-list-data">
                        <div>
                            <i class="fa fa-address-card"></i>
                            <span>简介</span>
                        </div>
                        <div>{{user.account.explain}}</div>
                    </div>
                </div>
            </el-card>
        </div>
        <div class="user-info-data">
            <el-card class="box-card">
                <template #header>
                    <div>
                        <span>基本资料</span>
                    </div>
                </template>
                <div>
                    <el-tabs v-model="activeName">
                        <el-tab-pane label="基本资料" v-if="UIAuth._api_admin_account_id_put" name="info">
                            <el-form :model="userInfo" status-icon :rules="userInfoRules" ref="userInfoForm" label-width="100px">
                                <el-form-item label="用户昵称">
                                    <el-input v-model="userInfo.nickname" placeholder="请输入用户昵称"></el-input>
                                </el-form-item>
                                <el-form-item label="用户名称">
                                    <el-input v-model="userInfo.username" placeholder="请输入用户名称"></el-input>
                                </el-form-item>
                                <el-form-item label="手机号码">
                                    <el-input v-model="userInfo.mobile" placeholder="请输入手机号码"></el-input>
                                </el-form-item>
                                <el-form-item label="电子邮箱">
                                    <el-input v-model="userInfo.email" placeholder="请输入电子邮箱"></el-input>
                                </el-form-item>
                                <el-form-item label="所在省">
                                    <el-input v-model="userInfo.province" placeholder="请输入所在省"></el-input>
                                </el-form-item>
                                <el-form-item label="所在市">
                                    <el-input v-model="userInfo.city" placeholder="请输入所在市"></el-input>
                                </el-form-item>
                                <el-form-item label="用户简介">
                                    <el-input v-model="userInfo.explain" type="textarea" :row="5" placeholder="请输入简介"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="saveUserInfo">保存</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>

                        <el-tab-pane label="密码修改" v-if="UIAuth._api_admin_account_pass_id_put" name="pass">
                            <el-form :model="editPass" status-icon :rules="passRules" ref="passForm" label-width="100px">
                                <el-form-item label="旧的密码" prop="oldPassWord">
                                    <el-input type="password" v-model="editPass.oldPassWord" placeholder="请输入旧的密码"></el-input>
                                </el-form-item>
                                <el-form-item label="新密码" prop="newPassWord">
                                    <el-input type="password" v-model="editPass.newPassWord" placeholder="请输入新密码"></el-input>
                                </el-form-item>
                                <el-form-item label="确认密码" prop="okPassWord">
                                    <el-input type="password" v-model="editPass.okPassWord" placeholder="请输再次入新密码"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="primary" @click="savePassWord">修改</el-button>
                                </el-form-item>
                            </el-form>
                        </el-tab-pane>
                    </el-tabs>
                </div>
            </el-card>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, toRefs, reactive, onMounted, ref } from "vue";
import { useStore } from "vuex";
import {
    IEditPass,
    defaultEditPass,
    passRules,
    userInfoRules,
} from "./userInfo";
import UserType from "@/components/user/UserType.vue";
import storage from "@/lib/storage/storage";
import utils from "@/lib/utils";
import http from "@/lib/http/http";
import message from "@/lib/message";
import md5 from "js-md5";
import valid from "@/lib/valid";
/**
 * state 数据类型
 */
interface IState {
    activeName: string;
    editPass: IEditPass; // 修改密码 模型
    passRules: any; // 修改密码表单校验
    userInfoRules: any; // 基本资料表单校验
    userInfo: any; // 基本资料模型
    user: any;
    branchName: string; // 部门机构名称
}
export default defineComponent({
    name: "UserInfo",
    components: { UserType },
    setup() {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const passForm: any = ref<any>();
        const userInfoForm: any = ref<any>();
        const state = reactive<IState>({
            activeName: "info",
            editPass: defaultEditPass, // 修改密码 模型
            passRules, // 修改密码表单校验
            userInfoRules, // 基本资料表单校验
            userInfo: {}, // 基本资料模型
            user: { account: {}, user: {} },
            branchName: "", // 部门机构名称
        });
        function updateUserInfo(data: any) {
            store.commit("updateUserInfo", data);
        }
        // 查询部门机构名称
        function getBranchName(id: string) {
            if (utils.empty(id) || id === "0") {
                state.branchName = "****";
                return;
            }
            http.Get(`/branch/${id}`)
                .then((data: any) => {
                    state.branchName = data.branch_name;
                })
                .catch((err: any) => false);
        }
        // 修改密码
        function savePassWord() {
            passForm.value.validate((valids: boolean) => {
                if (valids) {
                    if (
                        state.editPass.newPassWord !== state.editPass.okPassWord
                    ) {
                        message.error("新密码和确认密码不一致");
                        return false;
                    }
                    message.loadingShow("密码修改中");
                    const oldPassWord: string = md5(state.editPass.oldPassWord);
                    const newPassWord: string = md5(state.editPass.okPassWord);
                    http.Put(`/account/pass/${state.user.account.id}`, {
                        oldPassWord,
                        newPassWord,
                    })
                        .then((data: any) => {
                            state.editPass.oldPassWord = "";
                            state.editPass.newPassWord = "";
                            state.editPass.okPassWord = "";
                        })
                        .catch((err: any) => false);
                } else {
                    return false;
                }
            });
        }
        // 修改基本资料
        function saveUserInfo() {
            userInfoForm.value.validate((valids: boolean) => {
                if (valids) {
                    if (
                        !utils.empty(state.userInfo.mobile) &&
                        !valid.mobile(state.userInfo.mobile)
                    ) {
                        message.error("手机号码不合法");
                        return false;
                    }
                    if (
                        !utils.empty(state.userInfo.email) &&
                        !valid.email(state.userInfo.email)
                    ) {
                        message.error("电子邮箱不合法");
                        return false;
                    }
                    message.loadingShow("基本资料修中");
                    http.Put(
                        `/account/${state.user.account.id}`,
                        state.userInfo
                    )
                        .then((data: any) => {
                            state.userInfo = {};
                            state.user = data;
                            storage.user.Set(data);
                            updateUserInfo(data);
                        })
                        .catch((err: any) => false);
                } else {
                    return false;
                }
            });
        }
        onMounted(() => {
            state.user = storage.user.Get();
            if (!utils.empty(state.user.account.bid)) {
                getBranchName(state.user.account.bid);
            }
        });
        return {
            UIAuth,
            bodySize,
            valid,
            ...toRefs(state),
            passForm,
            userInfoForm,
            getBranchName,
            savePassWord,
            saveUserInfo,
            utils,
        };
    },
});
</script>

<style scoped lang="scss">
.user-info {
    display: flex;
    &-info {
        width: 510px;
        &-list {
            //padding-bottom: 20px;
            & > div {
                border-bottom: 1px $border-color2 solid;
                &:last-child {
                    border-bottom: none;
                }
            }
            &-portrait {
                text-align: center;
                padding-bottom: 20px;
                & > div {
                    width: 100px;
                    height: 100px;
                    border-radius: 50%;
                    overflow: hidden;
                    margin: 0 auto;
                    & > img {
                        width: 100%;
                        height: 100%;
                    }
                }
            }
            &-data {
                display: flex;
                align-items: center;
                padding: 10px;
                & > div {
                    &:first-child {
                        color: $text-regular-color;
                        width: 120px;
                        & > i {
                            width: 20px;
                        }
                    }
                    &:last-child {
                        width: calc(100% - 120px);
                        text-align: right;
                    }
                }
            }
        }
    }
    &-data {
        margin-left: 10px;
        width: calc(100% - 520px);
    }
}
</style>